<template>
	<view
		class="i-video e-flex"
		:style="[{
			paddingTop: px2rpx(option.paddingTop),
			paddingBottom: px2rpx(option.paddingBottom),
			paddingLeft: px2rpx(option.paddingX),
			paddingRight: px2rpx(option.paddingX),
			backgroundColor: option.backgroundColor
		}]"
	>
		<view
			class="video-main-box e-flex-xy-center"
			:style="[{
        borderRadius: `${px2rpx(option.radiusTop)} ${px2rpx(option.radiusTop)} ${px2rpx(option.radiusBottom)} ${px2rpx(option.radiusBottom)}`,
        height:
          option.videoRadio == 1
            ? '422rpx'
            : option.videoRadio == 2
            ? '562rpx'
            : '750rpx',
      }]"
		>
			<video :src="$fullLink(option.videoUrl)" :poster="$fullLink(option.coverImgUrl)" ></video>
		</view>
	</view>
</template>
<script lang="ts" setup>
import {px2rpx} from './utils'

const props = withDefaults(defineProps<{
		hasCustomNavigation ?: boolean
		option : {
			//样式风格
			styleType : 0 | 1 | 2
			//视频类型 1手动上传视频 2视频链接，用户端无需理会该属性
			videoType: 1|2,
			//视频比例 1为16:9 2为4:3 3为1:1
			videoRadio: 1|2|3,
			//视频地址
			videoUrl: string
			//封面图地址
			coverImgUrl: string
			//底部背景
			backgroundColor: string
			// 边距
			paddingTop: number
			paddingBottom: number
			paddingX: number
			// 圆角
			radiusTop: number
			radiusBottom: number
		}
	}>(), {
		option: () => ({
			styleType: 0,
			videoType: 1,
			videoRadio: 1,
			videoUrl: '',
			coverImgUrl: '',
			backgroundColor: '',
			paddingTop: 10,
			paddingBottom: 10,
			paddingX: 10,
			radiusTop: 0,
			radiusBottom: 0,
		})
	})
</script>
<style lang="scss" scoped>
.video-main-box {
	width: 100%;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	overflow: hidden;
	video {
		width: 100%;
		height: 100%;
	}
}
</style>
